<template>
  <!-- 简化为只有图标和徽章的组件 -->
  <span class="pairing-icon" @click="handleIconClick" title="未确认的出库单">
    <i class="el-icon-truck"></i>
    <el-badge
      :value="outBoundOrderItems"
      :hidden="outBoundOrderItems === 0"
      class="position-badge"
    ></el-badge>
  </span>
</template>

<script>
import { getUnpairedOutBoundStats } from "@/api/depot/outboundOrder";
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
export default {
  name: "OutboundNotePrompt",
  data() {
    return {
      // 示例数据，实际应用中可能需要从API获取
      outBoundOrderItems: 0,
    };
  },
  mounted() {
    if (checkPermi(["depot:outboundOrder:confirm"])) {
      // 组件挂载时获取统计数据
      this.fetchUnpairedProductsStats();
    }

    // 如果需要自动刷新，取消注释下一行
    // this.startStatsRefresh();
  },
  beforeDestroy() {
    // 组件销毁前清理定时器
    this.stopStatsRefresh();
  },
  methods: {
    // 新增图标点击处理函数
    handleIconClick() {
      // 跳转到指定页面
      this.$router.push({ name: "OutboundOrder" });
    },
    // 添加查询未配对产品统计信息的函数
    async fetchUnpairedProductsStats() {
      try {
        // 调用API获取未配对产品统计
        const response = await getUnpairedOutBoundStats();

        if (response && response.data) {
          this.outBoundOrderItems = response.data;
        }
      } catch (error) {
        console.error("Failed to fetch unpaired products stats:", error);
      }
    },

    // 如果需要定期刷新统计数据
    startStatsRefresh() {
      // 每5分钟刷新一次
      this.refreshInterval = setInterval(() => {
        this.fetchUnpairedProductsStats();
      }, 300000); // 300000毫秒 = 5分钟
    },

    stopStatsRefresh() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pairing-icon {
  cursor: pointer;
  padding: 0 8px;
  height: 100%;
  font-size: 18px;
  color: #5a5e66;
  display: inline-flex;
  align-items: center;
  position: relative;
  /* 为徽章定位提供参考 */

  /* 添加悬停效果提升用户体验 */
  &:hover {
    color: #409eff;
    background: rgba(0, 0, 0, 0.025);
  }
}

.position-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -20%);
  /* 微调到右上角 */
}

/* 确保徽章在正确显示 */
:deep(.el-badge__content),
.el-badge__content {
  margin-top: 2px;
  margin-right: 5px;
}
</style>
